(() => {
  let ele = {};
  ele.cunter = $("#cunter");
  ele.top_img = $("#top_img");

  ele.img_bei = $("#img_bei");
  let list = ["", ""];
  if (list.length == 0) {
    console.log(11111);
    ele.cunter.style.backgroundColor = "#f7efde";
    openMdl(ele.img_bei);
    closeMdl(ele.cunter);
  }
  //点击返回按钮
  ele.top_img.onclick = () => {
    history.back();
  };
  initList();
  function initList() {
    let token = getCookie("token");
    ajax({
      method: "get",
      url: API_PATH.PERIOD,
      header: {
        Authorization: token,
      },
      success: (res) => {
        console.log(res, 5555);
        list = res.data;

        initJilu();
      },
      error: (err) => {
        // openTips(err.msg);
      },
    });
  }
  // 追加元素用来分页处理
  function apenClied() {
    ele.cunter.addEventListener("scroll", () => {
      const clientHeight = ele.cunter.clientHeight;
      const scrollTop = ele.cunter.scrollTop;
      const scrollHeight = ele.cunter.scrollHeight - 1;
      if (clientHeight + scrollTop >= scrollHeight) {
        //在这里继续请求
      }
    });
  }

  // 判断滚动到底部后继续请求数据
  apenClied();
  function initJilu() {
    imgList = ["green", "blue", "purple", "red", "orange"];
    let newList = list
      .map((item, index) => {
        let n = `
      <div class="pr_box" id="pr_box">
      <div class="ben">
        <p>${item.detail.time.split(" ")[0]}</p>
       
      </div>
      <!-- 下面 -->
      <div class="pr_title">
        <div class="left">本期共开采：${item.detail.max_num}平米</div>
        <div class="right">奖池总金币：${item.detail.max_money}个</div>
      </div>
      <div class="pr_mi">
        <div class="left">矿山</div>
        <div class="center">大小(平米)</div>
        <div class="right">奖励金币</div>
      </div>
    <div class="list_ps" id="list_ps">
      <div  class="list_li">
    <div class="li_num">
        <div class="img">
          <img src="http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/130x90-green.png" alt="" />
          <div id="img_title${
            index + 1
          }" data-id="1" class="img_title"><p>最小</p></div>
        </div>
        </div>
      <p data-id="1" id="span_num${index + 1}">0平米</p>
      <div class="right" data-id="1" id="right_num${index + 1}">
        
          <p data-id="1" id="num_num${index + 1}">0个</p>
      
      </div>
    </div>
      <div class="list_li">
      <div class="li_num">
        <div class="img">
          <img src="http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/130x90-blue.png" alt="" />
          <div id="img_title${
            index + 1
          }" data-id="2" class="img_title"><p>最小</p></div>
        </div>
      </div>
      <p data-id="2" id="span_num${index + 1}">0平米</p>
      <div class="right" data-id="2"  id="right_num${index + 1}">
        
          <p data-id="2" id="num_num${index + 1}">0个</p>
       
      </div>
    </div>
      <div class="list_li">
      <div class="li_num">
        <div class="img">
          <img src="http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/130x90-purple.png" alt="" />
          <div id="img_title${
            index + 1
          }" data-id="3" id="img_title3" class="img_title"></div>
        </div>
        </div>
      <p data-id="3" id="span_num${index + 1}">0平米</p>
      <div class="right" data-id="3"  id="right_num${index + 1}">
        
          <p data-id="3" id="num_num${index + 1}">0个</p>
       
      </div>
    </div>
      <div class="list_li">
      <div class="li_num">
        <div class="img">
          <img src="http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/130x90-red.png" alt="" />
          <div id="img_title${
            index + 1
          }" data-id="4" id="img_title4" class="img_title"></div>
        </div>
        </div>
      <p data-id="4" id="span_num${index + 1}">0平米</p>
      <div class="right" data-id="4"  id="right_num${index + 1}">
        
          <p data-id="4" id="num_num${index + 1}">0个</p>
       
      </div>
    </div>
      <div class="list_li">
      <div class="li_num">
        <div class="img">
          <img src="http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/130x90-orange.png" alt="" />
          <div id="img_title${index + 1}" data-id="5" class="img_title"></div>
        </div>
        </div>
      <p data-id="5" id="span_num${index + 1}">0平米</p>
      <div class="right" data-id="5"  id="right_num${index + 1}">
        
          <p data-id="5" id="num_num${index + 1}">0个</p>
        <div>
          <span>每平米奖励</span>
          <img src="http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/jinbi.png" alt="" />
          <span>0</span><span>个</span>
        </div>
      </div>
    </div>
       
  </div>
      <div class="jiangli">
        <span>本期金币奖励更多者</span>
        <p id="gengduo"  data-id="${index}">更多</p>
      </div>
      <div class="psr_bottom">
        <div class="left" style="display:${
          item.rank_list[0] ? "block" : "none"
        }">
          <img
            class="left_img"
            src="http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/1.png"
            alt=""
          />
          <div class="img">
            <img src="${
              item.rank_list[0] &&
              item.rank_list[0].agent_detail &&
              item.rank_list[0].agent_detail.head_pic
                ? IMG_DOMAIN + item.rank_list[0].agent_detail.head_pic
                : "http://img.qxgs.cc/tiantianlaishouzu/img/my/tx1.png"
            }" alt="" />
          </div>
          <div class="left_num">${
            item.rank_list[0] ? item.rank_list[0].money : "0"
          }</div>
        </div>
        <div class="left" style="display:${
          item.rank_list[1] ? "block" : "none"
        }">
          <img
            class="left_img"
            src="http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/2.png"
            alt=""
          />
          <div class="img">
            <img src="${
              item.rank_list[1] &&
              item.rank_list[1].agent_detail &&
              item.rank_list[1].agent_detail.head_pic
                ? IMG_DOMAIN + item.rank_list[1].agent_detail.head_pic
                : "http://img.qxgs.cc/tiantianlaishouzu/img/my/tx1.png"
            }" alt="" />
          </div>
          <div class="left_num">${
            item.rank_list[2] ? item.rank_list[1].money : ""
          }</div>
        </div>
        <div class="left" style="display:${
          item.rank_list[2] ? "block" : "none"
        }">
          <img
            class="left_img"
            src="http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/3.png"
            alt=""
          />
          <div class="img">
            <img src="${
              item.rank_list[2] &&
              item.rank_list[2].agent_detail &&
              item.rank_list[2].agent_detail.head_pic
                ? IMG_DOMAIN + item.rank_list[2].agent_detail.head_pic
                : "http://img.qxgs.cc/tiantianlaishouzu/img/my/tx1.png"
            }" alt="" />
          </div>
          <div class="left_num">${
            item.rank_list[2] ? item.rank_list[2].money : ""
          }</div>
        </div>
      </div>
    </div>
      `;

        return n;
      })
      .join(" ");
    ele.cunter.innerHTML = newList;
    if (list.length == 0) {
      ele.cunter.innerHTML = "<div class='zanwu'>暂无记录</div>";
    }

    list.forEach((items, indexs) => {
      console.log(list, "00.0.0.2");
      if (items.list) {
        items.list.forEach((it, ix) => {
          if (ix + 1 == 1) {
            let n = document.querySelectorAll(`#right_num${indexs + 1}`);
            let m = document.querySelectorAll(`#img_title${indexs + 1}`);
            let s = document.querySelectorAll(`#span_num${indexs + 1}`);
            n.forEach((its, ix) => {
              if (its.dataset.id == 1) {
                if (it.max) {
                  its.innerHTML = `
                <p>${it.max.num}个</p>
                <div>
                  <span>每平米奖励</span>
                  <img src="http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/jinbi.png" alt="" />
                  <span>${it.max.money}</span><span>个</span>
                </div>`;
                } else if (it.min) {
                  its.innerHTML = `
                  <p>${it.min.num}个</p>
                  <div>
                    <span>每平米奖励</span>
                    <img src="http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/jinbi.png" alt="" />
                    <span>${it.min.money}</span><span>个</span>
                  </div>`;
                } else {
                  its.innerHTML = `
                  <p>0个</p>`;
                }
              }
            });
            m.forEach((its, ix) => {
              if (its.dataset.id == 1) {
                if (it.max) {
                  its.innerHTML = it.num;
                  its.innerHTML = `<p>最大</p>`;
                } else if (it.min) {
                  its.innerHTML = `<p>最小</p>`;
                } else {
                  its.style.display = "none";
                }
              }
            });
            //
            s.forEach((its, ix) => {
              if (its.dataset.id == 1) {
                its.innerHTML = `${it.num}平米`;
              }
            });
          } else if (ix + 1 == 2) {
            let n = document.querySelectorAll(`#right_num${indexs + 1}`);
            let m = document.querySelectorAll(`#img_title${indexs + 1}`);
            let s = document.querySelectorAll(`#span_num${indexs + 1}`);
            n.forEach((its, ix) => {
              if (its.dataset.id == 2) {
                if (it.max) {
                  its.innerHTML = `
                <p>${it.max.num}个</p>
                <div>
                  <span>每平米奖励</span>
                  <img src="http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/jinbi.png" alt="" />
                  <span>${it.max.money}</span><span>个</span>
                </div>`;
                } else if (it.min) {
                  its.innerHTML = `
                  <p>${it.min.num}个</p>
                  <div>
                    <span>每平米奖励</span>
                    <img src="http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/jinbi.png" alt="" />
                    <span>${it.min.money}</span><span>个</span>
                  </div>`;
                } else {
                  its.innerHTML = `
                  <p>0个</p>
                `;
                }
              }
            });
            m.forEach((its, ix) => {
              if (its.dataset.id == 2) {
                if (it.max) {
                  its.innerHTML = it.num;
                  its.innerHTML = `<p>最大</p>`;
                } else if (it.min) {
                  its.innerHTML = `<p>最小</p>`;
                } else {
                  its.style.display = "none";
                }
              }
            });
            //
            s.forEach((its, ix) => {
              if (its.dataset.id == 2) {
                its.innerHTML = `${it.num}平米`;
              }
            });
            console.log(2);
          } else if (ix + 1 == 3) {
            let n = document.querySelectorAll(`#right_num${indexs + 1}`);
            let m = document.querySelectorAll(`#img_title${indexs + 1}`);
            let s = document.querySelectorAll(`#span_num${indexs + 1}`);
            n.forEach((its, ix) => {
              if (its.dataset.id == 3) {
                if (it.max) {
                  its.innerHTML = `
                <p>${it.max.num}个</p>
                <div>
                  <span>每平米奖励</span>
                  <img src="http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/jinbi.png" alt="" />
                  <span>${it.max.money}</span><span>个</span>
                </div>`;
                } else if (it.min) {
                  its.innerHTML = `
                  <p>${it.min.num}个</p>
                  <div>
                    <span>每平米奖励</span>
                    <img src="http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/jinbi.png" alt="" />
                    <span>${it.min.money}</span><span>个</span>
                  </div>`;
                } else {
                  its.innerHTML = `
                  <p>0个</p>
                 `;
                }
              }
            });
            m.forEach((its, ix) => {
              if (its.dataset.id == 3) {
                if (it.max) {
                  its.innerHTML = it.num;
                  its.innerHTML = `<p>最大</p>`;
                } else if (it.min) {
                  its.innerHTML = `<p>最小</p>`;
                } else {
                  its.style.display = "none";
                }
              }
            });
            //
            s.forEach((its, ix) => {
              if (its.dataset.id == 3) {
                its.innerHTML = `${it.num}平米`;
              }
            });
          } else if (ix + 1 == 4) {
            let n = document.querySelectorAll(`#right_num${indexs + 1}`);
            let m = document.querySelectorAll(`#img_title${indexs + 1}`);
            let s = document.querySelectorAll(`#span_num${indexs + 1}`);
            n.forEach((its, ix) => {
              if (its.dataset.id == 4) {
                if (it.max) {
                  its.innerHTML = `
                <p>${it.max.num}个</p>
                <div>
                  <span>每平米奖励</span>
                  <img src="http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/jinbi.png" alt="" />
                  <span>${it.max.money}</span><span>个</span>
                </div>`;
                } else if (it.min) {
                  its.innerHTML = `
                  <p>${it.min.num}个</p>
                  <div>
                    <span>每平米奖励</span>
                    <img src="http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/jinbi.png" alt="" />
                    <span>${it.min.money}</span><span>个</span>
                  </div>`;
                } else {
                  its.innerHTML = `
                  <p>0个</p>
                  `;
                }
              }
            });
            m.forEach((its, ix) => {
              if (its.dataset.id == 4) {
                if (it.max) {
                  its.innerHTML = it.num;
                  its.innerHTML = `<p>最大</p>`;
                } else if (it.min) {
                  its.innerHTML = `<p>最小</p>`;
                } else {
                  its.style.display = "none";
                }
              }
            });
            //
            s.forEach((its, ix) => {
              if (its.dataset.id == 4) {
                its.innerHTML = `${it.num}平米`;
              }
            });
          } else if (ix + 1 == 5) {
            let n = document.querySelectorAll(`#right_num${indexs + 1}`);
            let m = document.querySelectorAll(`#img_title${indexs + 1}`);
            let s = document.querySelectorAll(`#span_num${indexs + 1}`);
            n.forEach((its, ix) => {
              if (its.dataset.id == 5) {
                if (it.max) {
                  its.innerHTML = `
                <p>${it.max.num}个</p>
                <div>
                  <span>每平米奖励</span>
                  <img src="http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/jinbi.png" alt="" />
                  <span>${it.max.money}</span><span>个</span>
                </div>`;
                } else if (it.min) {
                  its.innerHTML = `
                  <p>${it.min.num}个</p>
                  <div>
                    <span>每平米奖励</span>
                    <img src="http://img.qxgs.cc/tiantianlaishouzu/img/investmentIn_mines/jinbi.png" alt="" />
                    <span>${it.min.money}</span><span>个</span>
                  </div>`;
                } else {
                  its.innerHTML = `
                  <p>0个</p>
                 `;
                }
              }
            });
            m.forEach((its, ix) => {
              if (its.dataset.id == 5) {
                if (it.max) {
                  its.innerHTML = it.num;
                  its.innerHTML = `<p>最大</p>`;
                } else if (it.min) {
                  its.innerHTML = `<p>最小</p>`;
                } else {
                  its.style.display = "none";
                }
              }
            });
            //
            s.forEach((its, ix) => {
              if (its.dataset.id == 5) {
                its.innerHTML = `${it.num}平米`;
              }
            });
          }
        });
      }
    });
    // 点更多进入排行榜;
    let gengduoList = document.querySelectorAll("#gengduo");
    gengduoList.forEach((res) => {
      res.onclick = (e) => {
        let rank_list = JSON.stringify(list[e.target.dataset.id].rank_list);
        setCookie("rank_list", rank_list);
        location.href = `../page/previous_records_charts.html`;
      };
    });
  }
})();
